<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Tabs Example</title>
    <link rel="stylesheet" href="../highlight/styles/github-dark.css">
    <script src="../highlight/highlight.min.js"></script>
    <script>hljs.highlightAll();</script>
    <script>
        function togglePathList() {
            var container = document.getElementById('left-bar-container');

            if(container == null)
                console.log("container is null");

            container.classList.toggle('hide');
            var toggleBtn = document.getElementById('toggle-left-bar-btn');
            toggleBtn.innerHTML = container.classList.contains('hide') ? 'Show' : 'Hide';
        }

        function activateTab(tabName) {

            tab = document.getElementById(tabName);
            tabContent = document.getElementById(tabName + "-content")

            var i, tablinks, tabcontents;
            tablinks = document.getElementsByClassName('tab');
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].classList.remove('active');
            }

            tabcontents = document.getElementsByClassName('view');
            for (i = 0; i < tabcontents.length; i++) {
                tabcontents[i].classList.remove('active');
            }

            tab.classList.add('active');
            tabContent.classList.add('active');
            codeViewData.setActive(tabName);

            console.log(JSON.stringify(codeViewData));
        }

    </script>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, sans-serif;
        }

        .main-frame
        {
            display: flex;
            flex-direction: column;
            background-color: green;
            width: 100%;
            height: 100%;
        }

        .top-bar {
            display: flex;
            flex-direction: row;
            flex: 0 0 25px;
            background-color: steelblue;
            color: white;
           
            align-items: center;
            padding: 0 10px;
            box-sizing: border-box;
            z-index: 1000;
        }

        .child-frame
        {
            display: flex;
            flex-direction: row;
            flex : 1;
            background-color: rgb(180, 70, 98);
            color: white;
            width: 100%;
            height: calc(100% - 25px);
        }

        .left-bar
        {
            flex: 0 0 250px;
            background-color: rgb(100, 100, 100);
            color: white;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            padding-top: 10px;
            padding-left: 10px;
        }

        .path-item
        {
            padding-top: 50px;
            background-color:black;
        }

        .view-frame
        {
            flex: 1;
            display: flex;
            flex-direction: column;
            /*overflow-y: auto;*/
        }

        .tabs {
            flex : 0 0 35px;
            border-bottom: 1px solid #ccc;
            display: flex;
            flex-direction: row;
        }

        .tab {
            padding: 10px;
            cursor: pointer;
            border: 1px solid #ccc;
            border-bottom: none;
            margin-right: 5px;
            position: relative;
            display: flex;
            align-items: center;
        }
        
        .tab .close-btn {
            margin-left: 10px;
            cursor: pointer;
            color: red;
            font-weight: bold;
        }

        .tab.active {
            background-color: greenyellow;
            font-weight: bold;
        }

        .views {
            flex: 1;
            background-color: white;
            display: flex;
            overflow: hidden;
        }

        .view {
            flex: 1;
            overflow-y: auto;
            display: none;
            background-color: black;
        }

        .view.active {
            display: block;
        }

        .hide {
            display: none;
        }
        pre {
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="main-frame">
        <div class="top-bar">
            <button onclick="togglePathList()" id="toggle-left-bar-btn">Hide</button>
            <span style="margin-left: 10px;">This is the top bar</span>
        </div>
        <div class="child-frame">
            <div class="left-bar"  id="left-bar-container">
                <div class="path-item" onclick="activateTab('index.html')">index.html</div>
                <div class="path-item" onclick="activateTab('styles.css')">styles.css</div>
                <div class="path-item" onclick="activateTab('script.js')">script.js</div>
            </div>
            <div class="view-frame">
                <div class="tabs" id="tabs-container">
                    <div class="tab" id="index.html" onclick="activateTab('index.html')">index.html</div>
                    <div class="tab" id="styles.css" onclick="activateTab('styles.css')">styles.css</div>
                    <div class="tab" id="script.js" onclick="activateTab('script.js')">script.js</div>
                </div>
                <div class="views" id="view-container">
                    <div class="view" id="index.html-content">
                        <pre><code class="cpp">
                            #include "session_manager.h"
                            #include "nlohmann/json.hpp"
                            #include "../common/common.h"
                            
                            namespace ArrowWebSocket
                            {
                            
                            CSessionManager::CSessionManager()
                            {
                            }
                            
                            CSessionManager::~CSessionManager()
                            {
                                Deini();
                            }
                            
                            void CSessionManager::Init(asio::io_context& ioContext)
                            {
                                m_pTimer = new asio::steady_timer(ioContext);
                            }
                            
                            void CSessionManager::Run()
                            {
                                DoReadQueue();
                                return;
                            }
                            
                            void CSessionManager::Deini()
                            {
                                if(m_pTimer != nullptr)
                                {
                                    m_pTimer->cancel();
                                    delete m_pTimer;
                                    m_pTimer = nullptr;
                                }
                            }
                            
                            void CSessionManager::AddSession(SharedPtrISession pSession)
                            {
                                if(m_setSessions.find(pSession) != m_setSessions.end())
                                    return;
                            
                                if(m_setMsgSrcInfo.size() > 0 )
                                {
                                    std::string strTmpAllMsgSrcInfo;
                                    nlohmann::json j;
                                    for (auto& it : m_setMsgSrcInfo)
                                    {
                                        j.push_back(it);
                                    }
                                    strTmpAllMsgSrcInfo = j.dump();
                                    pSession->PutAllMsgSrcInfo(strTmpAllMsgSrcInfo);
                                }
                            
                                m_setSessions.insert(pSession);
                            }
                            
                            void CSessionManager::RemoveSession(SharedPtrISession pSession)
                            {
                                m_setSessions.erase(pSession);
                                if(m_setSessions.size() == 0)
                                {
                                    m_setMsgSrcInfo.clear();
                                }
                            }
                            
                            void CSessionManager::PutMsg(const SharedPtrMsg& pMsg)
                            {
                                m_msgQueue.Push(pMsg);
                            }
                            
                            void CSessionManager::DoReadQueue()
                            {
                                // if (m_msgQueue.Empty())
                                // {
                                //     // 启动定时器 10毫秒后再次调用
                                //     m_pTimer->expires_after(std::chrono::milliseconds(10));
                                //     m_pTimer->async_wait([this](beast::error_code ec) {
                                //         if (!ec)
                                //         {
                                //             DoReadQueue();
                                //         }
                                //     });
                                //     return;
                                // }
                                // SharedPtrMsg pMsg;
                                // if( false == m_msgQueue.Pop(pMsg))
                                // {
                                //     return;
                                // }
                            
                                // auto it = m_setMsgSrcInfo.find(pMsg->SrcInfo());
                                // if(it == m_setMsgSrcInfo.end())
                                // {
                                //     m_setMsgSrcInfo.insert(pMsg->SrcInfo());
                                //     nlohmann::json j;
                                //     j["msg_type"] = static_cast<int32_t>(EmMsgType::AllMsgSrcInfo);
                                //     for (auto& it : m_setMsgSrcInfo)
                                //     {
                                //         j["msg_src_info"].push_back(it);
                                //     }
                                //     std::string strtmp = j.dump();
                            
                                //     for (auto& it : m_setSessions)
                                //     {
                                //         it->PutAllMsgSrcInfo(strtmp);
                                //     }
                                // }
                            
                                // for (auto& it : m_setSessions)
                                // {
                                //     it->PutMsg(pMsg);
                                // }    
                                // DoReadQueue();
                            }
                            
                            int32_t CSessionManager::Count()
                            {
                                return m_setSessions.size();
                            }
                            
                            } // namespace ArrowWebSocket
                        </code></pre>
                    </div>
                    <div class="view" id="styles.css-content">
                        <pre>styles.css content</pre>
                    </div>
                    <div class="view" id="script.js-content">
                        <code class="cpp">script.js content</code>
                    </div>
                </div>
            </div>
        </div>
</div>
</body>
</html>
